<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
            font-size: 14px;
        }

        #l-map {
            height: 400px;
            width: 100%;
        }

        #r-result {
            width: 100%;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=YbGDpQDWu18eCxE0ZytauBvH9mT4lnUU"></script>
    <title>关键字输入提示词条</title>
</head>

<body>
<div id="l-map"></div>
<div id="r-result">请输入地址:<input type="text" id="suggestId" size="20" value="百度" style="width:400px;" /><button id="search-btn" class="layui-btn">搜索</button></div>
<input type="hidden" id="lng" />
<input type="hidden" id="lat" />
<input type="hidden"  style="width: 200px" id="add"/>
<button id="zzz" class="layui-btn">确认地址</button></div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>

</body>

</html>
<script type="text/javascript" src="resources/layui/layui.js"></script>
<script >
    layui.use(['form', 'layer', 'laydate', 'table', 'laytpl', 'upload'], function () {
        var form = layui.form
        layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery,
            laydate = layui.laydate,
            laytpl = layui.laytpl,
            table = layui.table,
            upload = layui.upload;
           $("#zzz").click(function () {
         var x=$("#lng").val();
         var y=$("#lat").val();
         var lnglat=x+","+y;
         var mAddress=$("#add").val();
         $.ajax({
             url:"/lnglat.do",
             data:{lnglat:lnglat,mAddress:mAddress},
             type:"post",
             success:function (res) {
               if(res.code==200){
                  layer.msg(res.msg)
                   var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                   parent.layer.close(index); //再执行关闭
               }else {
                   layer.msg(res.msg)
               }
             }
         })
           })
    })
</script>
<script type="text/javascript">

    (function(){
        // 百度地图API功能
        function G(id) {
            return document.getElementById(id);
        }
        var map = new BMap.Map("l-map");
        var lng=G('lng');
        var lat=G('lat');
        var searchBtn = G('search-btn');
        var myValue;
        var local=null;
        var ac=null;
        var geolocation = new BMap.Geolocation();
        ac = new BMap.Autocomplete({
            "input": "suggestId",
            "location": map
        });

        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                point = new BMap.Point(r.point.lng, +r.point.lat);
                map.centerAndZoom(point, 15);
            }
        })
        map.enableScrollWheelZoom();//开启鼠标滚轮缩放
        ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
            var str = "";
            var _value = e.fromitem.value;
            var value = "";
            if(e.fromitem.index > -1) {
                value = _value.province + _value.city + _value.district + _value.street + _value.business;
            }
            str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
            value = "";
            if(e.toitem.index > -1) {
                _value = e.toitem.value;
                value = _value.province + _value.city + _value.district + _value.street + _value.business;
            }
            str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
            G("searchResultPanel").innerHTML = str;
        });
        function myFun() {
            var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp)); //添加标注
        }
        function setPlace() {
            map.clearOverlays(); //清除地图上所有覆盖物
            local = new BMap.LocalSearch(map, { //智能搜索
                onSearchComplete: myFun
            });
            local.search(myValue);
        }
        function showInfo(e){
            var geoc = new BMap.Geocoder({extensions_town: true});
            var pt = e.point;
            lng.value=e.point.lng;
            lat.value=e.point.lat;
            map.clearOverlays()

            var marker = new BMap.Marker(pt);        // 创建标注
            map.addOverlay(marker);                     // 将标注添加到地图中
            //获取地址
            geoc.getLocation(pt, function(rs){
                var addComp = rs.addressComponents;
             add.value=addComp.province  + addComp.city+ addComp.district  + addComp.street+ addComp.streetNumber;
                suggestId.value=addComp.province  + addComp.city+ addComp.district  + addComp.street+ addComp.streetNumber;
            });

        }
        ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
            var _value = e.item.value;
            myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
            G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
            setPlace();
        });
        searchBtn.addEventListener("click", function() {//点击搜索
            map.clearOverlays(); //清除地图上所有覆盖物
            local = new BMap.LocalSearch(map, { //智能搜索
                onSearchComplete: myFun
            });
            local.search(document.getElementById("suggestId").value);
        });
        map.addEventListener("click", showInfo);//搜索事件
        map.enableDragging();

    })()

</script>